<script setup>
import { Close } from '@element-plus/icons-vue'
import mitt from '@/mitt'
const emits = defineEmits(['closeGame', 'openGame', 'update:modelValue'])
const isClient = window.electronAPI || window.__TAURI__
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  title: {
    type: String
  },
  timeout: {
    type: Boolean,
    default: false
  },
  type: {
    type: String,
    default: 'close'
  }
})

const closeDialog = () => {
  emits('update:modelValue', false)
}

const closeWin = () => {
  if (props.timeout) {
    emits('update:modelValue', false)
    window.location.reload()
    return
  }
  emits('update:modelValue', false)
  mitt.emit('closeGame', props.type === 'close' ? false : true)
}

const closeGame = () => {
  emits('closeGame')
}

const openGame = () => {
  emits('openGame')
}
</script>
<template>
  <div class="dialog-tips flex justify-center items-center">
    <div class="p-[30px] center mt-[-50px]">
      <div
        class="absolute right-[10px] top-[10px] cursor-pointer"
        @click="closeDialog"
        v-if="type !== 'error' || timeout"
      >
        <el-icon size="20" color="#999"><Close /></el-icon>
      </div>
      <div class="pt-[30px] pb-[40px]">{{ title }}</div>
      <div class="flex">
        <div
          v-if="type === 'openWeb' && !isClient"
          class="btn-primary w-[100%] h-[40px] rounded-md cursor-pointer"
          style="background: #444"
          @click="closeGame"
        >
          关闭程序
        </div>
        <div
          v-if="type === 'openWeb' && !isClient"
          class="btn-primary ml-[10px] w-[100%] h-[40px] rounded-md cursor-pointer"
          @click="openGame"
        >
          回到程序
        </div>
        <div
          v-if="type === 'close' || type === 'error'"
          class="btn-primary w-[100%] h-[40px] rounded-md cursor-pointer"
          @click="closeWin"
        >
          {{ timeout ? '刷新重连' : '关闭' }}
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.dialog-tips {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  .center {
    width: 350px;
    min-height: 120px;
    text-align: center;
    border-radius: 8px;
    position: relative;
    background: #1b2b35;
    border: 1px #222 solid;
  }
}
</style>
